<template>
  <div class="my-account-details">
    <!-- :style="{ background: '#fff', color: '#919499', fontSize: '12px' }" -->
    <a-table :columns="styledColumns" :data-source="tableData" :row-key="'orderId'" :style="style">
    </a-table>
  </div>
</template>

<script setup>
import { ref, inject, onMounted, computed } from "vue";
const style = ref({});
const headStyle = ref({});
// const accountParams = inject("accountParams", ref({}));
const columns = inject("tableColumns", []);
const tableData = inject("tableSource", []);
const tableStyle = inject("tableStyle", {});

onMounted(() => {
  console.log("组件挂载，初始参数：");
  generateTable();
});
// 生成表格数据
const generateTable = () => {
  //   if (!params || !params.transType) return;
  // 更新列
  style.value = {
    fontSize: tableStyle.fontSize || "12px",
  };
  headStyle.value = {
    background: tableStyle.background || "#fff",
    color: tableStyle.color || "#919499",
  };
  console.log(style.value, headStyle.value, "eeeeeeeeeee");
};
const styledColumns = computed(() => {
  console.log(columns, 'columnscolumnscolumnscolumnscolumns');

  return columns.map((col) => ({
    ...col,
    customHeaderCell: () => ({
      style: {
        background: tableStyle.background || "#fff", // 表头背景颜色
        color: tableStyle.color || "#919499", // 表头文字颜色
        fontSize: tableStyle.fontSize || "12px", // 表头字体大小
      },
    }),
  }))
});
</script>

<style scoped>
.my-transaction-details-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0);
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
}

.my-transaction-details {
  width: 100%;
  margin: 0 auto;
  background: #fff;
  border-radius: 10px;
  padding: 4px 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  z-index: 99999;
}

/* :deep(.ant-table-thead > tr > th) {
  background: #fff !important;
  color: #919499 !important;
} */
</style>
